<template>
  <div>
    <div class="tp111">
      <img src="../assets/images/2022.png" alt="" />
      <img src="../assets/images/2021.png" alt="" />
      <img src="../assets/images/2020.png" alt="" />
    </div>
    <div class="cen11" ref="wrap"></div>
  </div>
</template>

<script setup>
import * as echarts from 'echarts'
import { onMounted, ref } from 'vue'
let option = ref({
  //提示框
  yAxis: [
    {
      data: ['湖北', '江苏', '浙江', '广西', '广东', '重庆', '天津', '上海']
    }
  ],
  xAxis: [{}, {}],
  series: [
    {
      name: '配属',
      type: 'bar',
      // color: '#a3a7f4',
      xAxisIndex: 0,
      barWidth: 3,
      itemStyle: {
        emphasis: {
          barBorderRadius: 4
        },
        normal: {
          barBorderRadius: 4,
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            1,
            0,
            [
              {
                offset: 0,
                color: 'red' // 0% 处的颜色
              },
              {
                offset: 1,
                color: 'plum' // 100% 处的颜色
              }
            ],
            false
          ),
          barBorderRadius: [0, 45, 45, 0]
        }
      },
      data: [409, 887, 948, 611, 327, 355, 560, 498, 569]
    },
    {
      name: '运用',
      type: 'bar',
      // color: '#a476f5',
      xAxisIndex: 1,
      barWidth: 3,
      itemStyle: {
        emphasis: {
          barBorderRadius: 4
        },
        normal: {
          barBorderRadius: 4,
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            1,
            0,
            [
              {
                offset: 0,
                color: 'skyblue' // 0% 处的颜色
              },
              {
                offset: 1,
                color: 'skyblue' // 100% 处的颜色
              }
            ],
            false
          ),
          barBorderRadius: [0, 45, 45, 0]
        }
      },
      data: [844, 780, 284, 65, 51, 659, 50, 183, 542]
    },
    {
      name: '厂段修',
      type: 'bar',
      // color: '#f00',
      xAxisIndex: 1,
      barWidth: 3,
      itemStyle: {
        emphasis: {
          barBorderRadius: 4
        },
        normal: {
          barBorderRadius: 4,
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            1,
            0,
            [
              {
                offset: 0,
                color: '#F0E68C' // 0% 处的颜色
              },
              {
                offset: 1,
                color: '#FFD700' // 100% 处的颜色
              }
            ],
            false
          ),
          barBorderRadius: [0, 45, 45, 0]
        }
      },
      data: [444, 784, 284, 146, 145, 645, 140, 143, 52]
    }
  ]
})

let wrap = ref('')

onMounted(() => {
  let myChart = echarts.init(wrap.value)
  myChart.setOption(option.value)

  window.addEventListener('resize', function () {
    myChart.resize()
  })
})
</script>

<style>
.tp111 {
  width: 100%;
  height: 80px;
}
.tp111 img {
  width: 80px;
  height: 100px;
  margin-left: 53px;
  margin-top: 10px;
}
.cen11 {
  width: 100%;
  height: 380px;
  /* background-color: red; */
}
</style>